<script setup>
const { proxy } = getCurrentInstance()

const emit = defineEmits(['update:modelValue', 'change'])

const props = defineProps({
  // 绑定
  modelValue: {
    type: Array,
    default: () => [],
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 数据支持
  options: {
    type: Array,
    default: () => [],
  },

  // 数据配置项
  prop: {
    type: Object,
    default: { label: 'label', value: 'id', children: 'children' },
  },
})
console.log('---')
// v-model
const cascader = ref([])

// 选择改变时
const nodeClick = (val) => {
  emit('update:modelValue', val[val.length - 1])
  emit('change', val)
}

let pathId = []
const ch = async (arr) => {
  return new Promise((resolve, reject) => {
    for (var i = 0; i < arr.length; i++) {
      const item = arr[i]
      const itemId = item[props.prop.value]
      const itemCh = item[props.prop.children]
      if (itemCh && itemId != props.modelValue) {
        pathId.push(itemId)
        ch(itemCh)
      }
      if (itemId == props.modelValue) {
        pathId.push(itemId)
      }
    }
    resolve(pathId)
  })
}

watch(
  () => props.modelValue,
  async (val) => {
    if (val) {
      pathId = []
    }
  },
  {
    immediate: true,
    deep: true,
  }
)
</script>

<template>
  <el-cascader
    v-model="cascader"
    :disabled="props.disabled"
    :show-all-levels="false"
    :options="props.options"
    :node-key="props.nodeKey"
    :props="{
      label: props.prop.label || 'label',
      value: props.prop.value || 'id',
      children: props.prop.children || 'children',
    }"
    @change="nodeClick"
  />
  <!-- <el-input
    v-else
    v-model="ruleForm.docConfigDict"
    disabled
    clearable
    placeholder="请填写配置名称"
  /> -->
</template>
<style scoped lang="scss"></style>
